import React from 'react';
import PropTypes from 'prop-types';
import { Card } from 'antd';

import styles from './ChartCard.less';

const ChartCard = ({ title, children }) => {
  return (
    <Card className={styles.card}>
      <p className={styles.title}>{title}</p>
      {children}
      <span className={`${styles.corner} ${styles.topLeft}`}></span>
      <span className={`${styles.corner} ${styles.topRight}`}></span>
      <span className={`${styles.corner} ${styles.bottomLeft}`}></span>
      <span className={`${styles.corner} ${styles.bottomRight}`}></span>
    </Card>
  );
}

ChartCard.propTypes = {
  title: PropTypes.string.isRequired
}

export default ChartCard;
